<template>
	<view class="content">
		<!--钱包余额-->
		<view class="content_1">
			<image class="surplus_icon" src="../../../static/mine/purse/coin.svg"></image>
			<view class="surplus">
				<view style="height: 50upx; line-height: 50upx; font-size: 36upx;color: #8a8a8a; margin-left: 10upx;">￥</view>
				<view class="surplus_num">{{money}}元</view>
				<view style="width: 46upx; height: 50upx;"></view>
			</view>
			<view class="surplus_tips">当前钱包金额提现将在三天内进行打款</view>
			<view class="surplus_detail" @click="toDetail">流水明细</view>
		</view>
		<!--充值、体现-->
		<view class="content_2">
			<view class="btn_2" style="background-color: #63D0D5; margin-bottom: 30upx;" @click="toRecharge">充值</view>
			<view class="btn_2" style="background-color: #D9D9D9;" @click="toCashout">提现</view>
		</view>
		<!-- <view style="height: 20upx; background-color: #FFFFFF; margin-bottom: 40upx;"></view> -->
		<!--优惠券中心-->
		<!-- <view class="content_3">
			<view class="title">优惠券中心</view>
			<view class="line_title"></view>
			<view class="coupon_view" @click="chooseCoupon">
				<view :class="[couponstate == '0' ? 'coupon_icon' : 'coupon_icon_active']"></view>
				<view :class="[couponstate == '0' ? 'coupon_name' : 'coupon_name_active']">优惠券</view>
			</view>
		</view> -->
		<block v-if="tabBars.length > 0">
			<!-- 会员卡选择 -->
			<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
				<view 
					v-for="(item,index) in tabBars" :key="item.id"
					class="nav-item"
					:class="{current: index === tabCurrentIndex}"
					:id="'tab'+index"
					@click="changeTab(index)"
				>{{item.name}}</view>
			</scroll-view>
			<!-- 会员卡详情 -->
			<view>
				<view class="nav-detail">
					<text class="nav-title">积分有效时间：</text>
					<view class="nav-introduce">
						<text v-if="detail.clear_time > 0" >{{detail.clear_time|formatDate()}}清空积分</text>
						<text v-else >永久有效</text>
					</view>
				</view>
				<view class="nav-detail">
					<text class="nav-title">积分获取和到账方式</text>
					<view class="nav-introduce">
						<text v-if="detail.get_channel==1">充值 获取积分</text>
						<text v-if="detail.get_channel==2">租房 获取积分</text>
						<text v-if="detail.get_channel==3">租家具 获取积分</text>
						<text v-if="detail.get_channel==4">购物 获取积分</text>
						<text v-if="detail.get_channel==5">线下扫码 获取积分</text>
						<text v-if="detail.settle_date > 0">分{{detail.settle_date}}个月到账</text>
						<text v-else>立即到账</text>
					</view>
				</view>
				<view class="nav-detail">
					<text class="nav-title">抵扣比例</text>
					<view class="nav-introduce">
						<text>充值消费{{detail.pay_radio_rmb}}元获得{{detail.pay_radio_coin}}积分</text>
						<text>{{detail.withdraw_ratio_coin}}积分 = {{detail.withdraw_ratio_rmb}}元</text>
					</view>
				</view>
				<view class="nav-detail">
					<text class="nav-title">抵扣类型</text>
					<view class="nav-introduce">
						<text v-if="detail.rent_times > 0">租房抵扣比例{{detail.rent_ratio}}%，每月抵扣{{detail.rent_times}}次</text>
						<text v-else>租房抵扣比例{{detail.rent_ratio}}%，不限制抵扣次数</text>
						<text v-if="detail.furniture_times > 0">租家具抵扣比例{{detail.furniture_ratio}}%，每月抵扣{{detail.furniture_times}}次</text>
						<text v-else>租家具抵扣比例{{detail.furniture_ratio}}%，不限制抵扣次数</text>
						<text v-if="detail.buy_times > 0">商场抵扣比例{{detail.buy_ratio}}%，每月抵扣{{detail.buy_times}}次</text>
						<text v-else>商场抵扣比例{{detail.buy_ratio}}%，不限制抵扣次数</text>
						<text v-if="detail.scan_times > 0">线下消费抵扣比例{{detail.scan_ratio}}%，每月抵扣{{detail.scan_times}}次</text>
						<text v-else>线下消费抵扣比例{{detail.scan_ratio}}%，不限制抵扣次数</text>
					</view>
				</view>
				<view class="nav-detail">
					<text class="nav-title">详细说明</text>
					<view class="nav-introduce">
						<text>{{detail.description}}</text>
					</view>
				</view>
			</view>
			<!-- 会员卡开通按钮 -->
			<view class="statistics-box">
				<view class="statistics">
					<view class="statistics-left">
						<text class="text-color">价格  ¥{{detail.price}}</text>
					</view>
					<view class="statistics-right" v-if="member_id!=detail.id">
						<view class="btn" @click="toOpen()">
							<text>立即开通</text>
						</view>
					</view>
					<view class="statistics-right" v-else>
						<view class="btn" style="background-color: #D9D9D9;">
							<text>已开通该会员</text>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				couponstate: '0',
				money: '0.00',
				member_id: 0,
				tabCurrentIndex:0,
				tabBars:[],
				detail: {}
			}
		},
		onShow() {
			new Request('customer/purse/Get_Customer_Purse/GetInfo').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						userid: app.globalData.userid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res) => {
					if (res.data.code == 0) {
						new Request().showToast(res.data.msg);
						return;
					}
					this.money = res.data.data.user_purse.toFixed(2);
					this.member_id = res.data.data.member_id;
				}
			)
			// 初始化会员列表
			new Request('customer/member/getOpenList').request(
				() => {
					return 'GET'
				},
				() => {},
				(res) => {
					if (res.data.code == 0) {
						new Request().showToast(res.data.msg);
						return;
					}
					this.tabBars = res.data.data;
					this.detail = this.tabBars[this.tabCurrentIndex];
				}
			)
		},
		filters: {
			// 时间戳处理
			formatDate: function(value='-',spe='/') {
				value = value*1000
				let data= new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				h = h > 9 ? h : "0" + h;
				mm = mm > 9 ? mm : "0" + mm;
				s = s > 9 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			},
		},
		methods: {
			//优惠券选中点击切换
			chooseCoupon: function() {
				if (this.couponstate == '0') {
					this.couponstate = '1'
				} else {
					this.couponstate = '0'
				}
			},
			//跳转充值页面
			toRecharge: function() {
				uni.navigateTo({
					url: '/pages/mine/purse/recharge/recharge'
				})
			},
			//跳转提现页面
			toCashout: function() {
				uni.navigateTo({
					url: '/pages/mine/purse/cashout/cashout?money=' + this.money
				})
			},
			//跳转流水明细页面
			toDetail: function() {
				uni.navigateTo({
					url: '/pages/mine/purse/detail/detail'
				})
			},
			changeTab: function(index) {
				this.tabCurrentIndex = index //获取索引
				this.detail = this.tabBars[this.tabCurrentIndex];
			},
			toOpen: function() {
				new Request('customer/member/toOpen').request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
							userid: app.globalData.userid,
							memberId: this.tabBars[this.tabCurrentIndex].id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
							pursemoney: this.money,
						}
					},
					(res)=>{
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						let that = this;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: (res) => {
								console.log('success:' + JSON.stringify(res));
								new Request().showToast('开通成功');
								this.member_id = this.tabBars[this.tabCurrentIndex].id;
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								new Request().showToast('已取消开通', 'none');
							}
						});
					}
				);
			},
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		钱包余额样式
	*/
	.content_1 {
		position: relative;
		margin: 0 30upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40upx;
	}

	.surplus_icon {
		width: 120upx;
		height: 120upx;
		margin-bottom: 30upx;
	}

	.surplus {
		height: 80upx;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}

	.surplus_num {
		height: 80upx;
		line-height: 80upx;
		font-size: 56upx;
		color: #000000;
	}

	.surplus_tips {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		color: #919191;
	}

	.surplus_detail {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #999999;
		position: absolute;
		top: 0upx;
		right: 0upx;
	}

	/*
		充值、体现样式
	*/
	.content_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40upx;
	}

	.btn_2 {
		height: 90upx;
		width: 532upx;
		border-radius: 90upx;
		text-align: center;
		line-height: 90upx;
		font-size: 28upx;
		color: #FFFFFF;
	}

	/*
		优惠券中心样式
	*/
	.content_3 {
		margin: 0 30upx;
		display: flex;
		flex-direction: column;
	}

	.title {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
		margin-left: 10upx;
	}

	.line_title {
		height: 6upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 40upx;
		margin-left: 10upx;
	}

	.coupon_view {
		height: 120upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		padding: 0upx 70upx;
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
	}

	.coupon_icon {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 5upx solid #999999;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_icon_active {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 10upx solid #519DFF;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_name {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	.coupon_name_active {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #519dff;
	}
	
	/* 会员卡tabbar */
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		/* box-shadow: 0 2upx 8upx rgba(0,0,0,.06); */
		background-color: #fff;
	}
	.nav-item {
		display: inline-block;
		width: 150upx;
		height: 90upx;
		text-align: center;
		line-height: 90upx;
		font-size: 30upx;
		color: #303133;
		position: relative;
	}
	.nav-item:after{
		content: '';
		width: 0;
		height: 0;
		border-bottom: 4upx solid #67CDD4;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		transition: .3s;
	}
	.current{
		color: #67CDD4;
	}
	.current:after{
		width: 50%;
	}
	
	.nav-detail {
		margin-top: 10upx;
		margin-bottom: 50upx;
		padding: 0 20upx;
	}
	.nav-title{
		display: flex;
		font-size: 26upx;
		color: #909399;
	}
	.nav-introduce{
		font-size: 26upx;
		color: #303133;
		margin-bottom: 16upx;
		margin-right: 16upx;
	}
	.nav-introduce text{
		display: block;
		margin: 5upx 0;
	}
	
	
	
	.statistics-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
	}
	.statistics-box .gap {
		width: 100%;
		height: 40upx;
	}
	.statistics-box .statistics {
		width: 100%;
		height: 98upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.statistics-box .statistics .statistics-left {
		width: 400upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-left: 20upx;
	}
	.statistics-box .statistics .statistics-left text {
		font-size: 30upx;
		font-weight: 400;
		color: #313133;
	}
	
	.statistics-box .statistics .statistics-right {
		width: 600upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.statistics-box .statistics .statistics-right .btn {
		width: 300upx;
		height: 98upx;
		background: #67CDD4;
		text-align: center;
		line-height: 98upx;
		font-size: 30upx;
		font-weight: 400;
		color: #313133;
	}
	.statistics-box .statistics .statistics-right text {
		font-size: 30upx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
